import tpl from './index.tpl'
import './index.scss'

import $ from 'jquery'
import list from './list/list.js'
import { tplReplace } from '../../utils/tools'

export default () => {

    let GatherList = list(),
            SlideMain = null;

    return {
        name: 'SlideScreen',

        tpl( data ) {
            return tplReplace( tpl, {
                list: GatherList.tpl( data )
            });
        },

        bindEvent() {
            GatherList.bindEvent( this.MoveBox, this.EndBox );
            SlideMain = $('.SlideMain');
        },

        MoveBox( even ) {
            // 滑动前移除过渡样式
            SlideMain.css( "transition", "" );
            // 控制滑动距离
            SlideMain.css({ "transform": `translateY(${even}px)` });
        },

        EndBox( even ) {
            // 结束滑动时 添加过渡 解决生硬切换
            SlideMain.css({ "transition": "transform .2s" });
        }

    }
}